<template>
	<view class="staff-manage-page">
		<view class="invite-staff">
			<view class="staff-num">
				<view :class="staffStatusIndex == 1?'on-job-staff-active on-job-staff':'on-job-staff'" v-if="staffStatusIndex == 1 || staffStatusIndex == 0">
					在职员工数：<text>{{onJobstaff.length - 1}}人</text>
				</view>
				<view :class="staffStatusIndex == 2?'on-job-staff-active on-job-staff':'on-job-staff'" v-if="staffStatusIndex == 2 || staffStatusIndex == 0">
					离职员工数：<text>{{dimissionStaff.length}}人</text>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
				<button class="" open-type="share">+邀请新员工加入</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
				<view class="" @click="share_tip">+邀请新员工加入</view>
			<!-- #endif -->
		</view>
		<view class="search-bnak-detail">
			<view class="">
				<view class="search-bnak-input">
					<image :src="imglink + 'member/search-icon.png'" mode="" @click="searchStaff"></image>
					<input type="text" v-model="staffName"  placeholder="输入员工姓名"/>
				</view>
				<view class="search-bnak-title" @click="searchStaff">
					搜索
				</view>
			</view>
		</view>
		<view class="staff-all-msg">
			<view class="staff-status">
				<view class="staff-status-content">
					<view :class="staffStatusIndex==index?'is_active':''" v-for="(item,index) in staffStatus" :key='index' @click="chooseStatus(index,item.value)">
						{{item.name}}
					</view>
				</view>
			</view>
			<scroll-view v-if="staffList.length!=0" scroll-y="true" :style="'height:'+height+'px'" scroll-with-animation  @scrolltolower="LoadingMore">
				<view class="staff-msg-content" v-for="(item,index) in staffList" :key='index'>
						<view class="staff-name-img">
							<view class="staff-per-msg">
								<image :src="item.user[0].headimgurl" mode=""></image>
								<view class="staff-name">{{item.name}}</view>
							</view>
							<view class="staff-time">{{item.date_added}}</view>
						</view>
						<view class="staff-phone">
							<view class="staff-phone-details">
								电话：{{item.telephone}}
							</view>
							<view class="dial-phone" @click="dialTel(item.telephone)">
								拨打电话
							</view>
						</view>
						<view class="we-chat">
							微信号：{{item.wechat_number}}
						</view>
						<view class="staff-post">
							职位：
							<view class="" v-if="item.status==0" style="color: #FF391F;">离职</view>
							<view class="" v-else>在职</view>
							<view class="" v-if="item.role == 1">员工</view>
							<view class="" v-else-if="item.role == 2">队长</view>
							<view class="" v-else-if="item.role == 4">管理员</view>
						</view>
						<view class="post-lift">
							<view class="" v-if="item.status == 0" @click="recoverPost('status','1',item.customer_store_employee_id)">恢复在职</view>
							<view class="" v-if="item.status == 1" @click="recoverPost('status','0',item.customer_store_employee_id)">离职标记</view>
							<view class="" v-if="item.role == 1" @click="recoverPost('role','2',item.customer_store_employee_id)">升为队长</view>
							<view class="" v-if="item.role == 2" @click="recoverPost('role','1',item.customer_store_employee_id)">降为员工</view>
							<view class="" v-if="item.role == 1" @click="recoverPost('role','4',item.customer_store_employee_id)">升为管理员</view>
							<view class="" v-if="item.role == 2" @click="recoverPost('role','4',item.customer_store_employee_id)">升为管理员</view>
							<view class="" v-if="item.role == 4" @click="recoverPost('role','2',item.customer_store_employee_id)">降为队长</view>
						</view>
					</view>
			</scroll-view>
			<view class="no-staff" v-else>
				<view class="">
					暂无员工！请添加
				</view>
			</view>
		</view>
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'share_tip.png'"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//#ifdef H5
	import wx from '@/common/wx-js-sdk.js'
	//#endif
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		components:{uniPopup},
		data(){
			return{
				imglink: this.$store.state.imgLink,
				staffStatus:[
					{name:'全部',value:''},
					{name:'在职',value:'1'},
					{name:'离职',value:'0'},
				],
				staffStatusIndex:0,
				staffList:[],
				state:'',
				pageSize:5,
				page:1,
				lastPage:'',
				staffName:'',
				onJobstaff:[],//在职员工列表
				dimissionStaff:[],//离职员工列表
				height:80,
				store_id:'',
				store_info:{}
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
			this.getList()
			this.getStoreInfo()
			
		},
		onShow(){
		},
		// #ifdef MP-WEIXIN
			onShareAppMessage(res) {
				let that = this
				console.log(that.store_info)
				return {
					// this.$store.state.store_url
					title:  that.store_info.contact + '邀请您加入' + that.store_info.name, // 分享描述
					path: '/pages/staffInvitation/staffInvitation?store_id=' + that.store_info.customer_store_id,
					imageUrl: that.store_info.store_logo, // 分享图标
				}
			},
		// #endif
		methods:{
			share_tip(){
				this.$refs.shareTip.open()
			},
			getStoreInfo(){
				
				const _self = this
				
				const data = {
					customer_store_id:this.store_id
				}
				
				this.$api.gain_shop_msg(data).then(res => {
					
					_self.store_info = res.data
					console.log(_self.store_info,"???????????????????????????????????");
				}).catch( err => {
					console.log(err)
				})
				
				
			},
			getStore(){
				
				const _self = this
				
				const data = {
					customer_store_id:this.store_id
				}
				
				this.$api.gain_shop_msg(data).then(res => {
					
					if(!res.status){
						return false
					}
					// console.log(res.data,'store res.data')
					// return false
					
					const store_info = res.data
					_self.store_info = res.data
					console.log(_self.store_info,"???????????????????????????????????");
					// 进行签名的时候  Android 不用使用之前的链接， ios 需要
					let signLink = /(Android)/i.test(navigator.userAgent) ? location.href : window.entryUrl;
					let data = {
						token:_self.$store.getters.getToken,
						url:signLink
					}
					
					this.$api.gain_share_data(data).then( res => {
						const shareConfig = JSON.parse(res.data)
						
						console.log(shareConfig,'share res.data')
						
						wx.config(shareConfig)
						wx.ready(function(){
							
							wx.checkJsApi({
								jsApiList: [
									'updateTimelineShareData',
									'updateAppMessageShareData',
									'onMenuShareAppMessage',
									'onMenuShareTimeline'
								],
								success: function(res) {
									console.log('接口检测成功:'+res);
								},
								error: function(err) {
									console.log('接口检测失败:'+err);
								}
							})
							
							const shareData = { 
								title: store_info.name, // 分享标题
								desc:  store_info.contact + '邀请您加入' + store_info.name, // 分享描述
								link: _self.current_url()+'/pages/staffInvitation/staffInvitation?store_id='+store_info.customer_store_id,
								imgUrl: _self.current_url()+'/static/qrocde-demo.jpg', // 分享图标
								success: function (res) {
								  console.log(res,'success ---')
								},
								fail:function(err){
									console.log(err.errMsg,'fail ---')
								}
							}
							wx.updateAppMessageShareData(shareData);
							wx.updateTimelineShareData(shareData);
						})
						wx.error(function(res){
							console.log(res,'wx.error')
						})					
					}).catch( err => {
						
						console.log(err)
					})
					
				}).catch( err => {
					console.log(err)
				})
				
				
			},
			inviteStaff2(){
				// uni.navigateTo({
				// 	url:'../../staffInvitation/staffInvitation?store_id=' + this.store_id
				// })
				let data = {
					token:this.$store.getters.getToken,
					url:location.href
				}
				let _self = this
				this.$api.gain_share_data(data).then(res => {
					console.log(res)
					if(res.status){
						let dataA = JSON.parse(res.data)
						wx.config(dataA)
						wx.ready(()=>{
							wx.updateAppMessageShareData({
								title:'测试分享吧',
								desc: '这是个分享，阿斯顿发送到发撒地方',
								link:this.$store.state.URL + '/pages/staffInvitation/staffInvitation?share_id=' + _self.$store.getters.getStoreId,
								success(res){
									console.log(res)
								},
								cancel(err){
									console.log(err)
								}
							})
							wx.error(function(res) {
								console.log('wx.config error 11111111111111',res.errMsg);
							});
						})
						// return true
					}
				}).catch(err => {
					console.log(err)
				})
				
			},
			chooseStatus(index,value){
				this.staffStatusIndex = index
				this.state = value
				this.getList()
			},
			// 获取员工数据
			getList(){
				this.page =1
				let data = {
					token:this.$store.getters.getToken,
					status:this.state,
					page:1,
					store_id:this.store_id,
					pagesize:this.pageSize,
					name:this.staffName
				}
				this.$api.get_staff_list(data).then( res => {
					console.log(res)
					if(res.status){
						this.dimissionStaff = res.leaves
						this.onJobstaff = res.onjobs
						this.staffList = res.data.data
						this.lastPage = res.data.last_page
						// for(let i=0;i < this.staffList.length; i++){
						// 	if(this.staffList[i].status == 0){
						// 		this.dimissionStaff.push(this.staffList[i])
						// 	}else{
						// 		this.onJobstaff.push(this.staffList[i])
						// 	}
						// }
						console.log('员工列表',this.staffList)
						
						this.getStore()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch( err => {
					console.log(err)
				})
			},
			// 加载下一页
			LoadingMore(){
				this.page ++
				console.log(this.page)
				if(this.page <= this.lastPage){
					let data = {
						token:this.$store.getters.getToken,
						status:this.state,
						page:this.page,
						pagesize:this.pageSize,
						name:this.staffName,
						store_id:this.store_id,
					}
					this.$api.get_staff_list(data).then(res => {
						console.log(res)
						if(res.status){
							this.staffList = this.staffList.concat(res.data.data)
							console.log('第多少页',this.page,this.staffList.length)
							
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}else{
					uni.showToast({
						title:'没有更多啦',
						icon:'none',
						duration:2000
					})
				}
			},
			searchStaff(){
				this.getList()
			},
			recoverPost(state,index,id){
				let data = {
					token:this.$store.getters.getToken,
					status:'',
					role:'',
					customer_store_employee_id:id
				}
				if(state == 'status'){
					data.status = index
				}
				if(state == 'role'){
					data.role = index
				}
				console.log(data.status,'data.status')
				console.log(data.role,'data.role')
				
				this.$api.edit_staff_case(data).then( res => {
					console.log(res)
					if(res.status){
						uni.showToast({
							title:'修改成功',
							icon:"none",
							duration:2000
						})
						setTimeout( () => {
							this.getList()
						},1000)
					}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
				}).catch( err => {
					console.log(err)
				})
			},
			// 拨打电话
			dialTel(tel){
				uni.makePhoneCall({
					phoneNumber:tel,
					success(res) {
						console.log(res)
					},
					fail(err) {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style>
	.popup_box_de{
		width: 100%;
		height: 100%;
	}
	.popup_box_close{
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;right: 10upx;
	}
	.no-staff{
		color: #999999;
		font-size: 28upx;
		text-align: center;
		position: fixed;
		top: 50%;left: 50%;
		transform: translate(-50%,-50%);
	}
	page{
		background: #F3F3F4;
	}
	.staff-manage-page{
		width: 100%;
		height: 100%;
		
	}
	.invite-staff{
		width: 100%;
		background: #FFFFFF;
		padding: 30upx;
		box-sizing: border-box;
	}
	.staff-num{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 34upx;
		padding-top: 36upx;
		box-sizing: border-box;
	}
	.on-job-staff{
		color: #666666;
		font-size: 28upx;
		text-align: center;
		margin: 0 auto;
	}
	.on-job-staff>text{
		color: #333333;
		font-size: 34upx;
		text-align: center;
	}
	.on-job-staff:first-child{
		padding-right: 76upx;
		box-sizing: border-box;
		border-right: 1upx solid #DEDEDE;
	}
	.staff-num .on-job-staff-active{
		padding: 0;
		border:none;
	}
	.invite-staff>view:last-child{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 44upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		font-size: 32upx;
		margin: 0 auto;
		margin-top: 54upx;
	}
	button{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 44upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		font-size: 32upx;
		margin: 0 auto;
		margin-top: 54upx;
	}
	.search-bnak-detail{
		width: 100%;
		padding: 16upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.search-bnak-detail>view{
		width: 100%;
		height: 72upx;
		border-radius: 36upx;
		background: #F3F3F4;
		display: flex;
		justify-content: space-between;
	}
	.search-bnak-input{
		display: flex;
		flex-grow: 1;
		padding-left: 30upx;
		box-sizing: border-box;
		padding-top: 16upx;
		justify-content: space-between;
	}
	.search-bnak-input>image{
		width: 32upx;
		height: 32upx;
		margin-top: 4upx;
	}
	.search-bnak-input>input{
		font-size: 28upx;
		flex-grow: 1;
		margin-left: 20upx;
	}
	.search-bnak-title{
		width: 116upx;
		height: 72upx;
		line-height: 72upx;
		text-align: center;
		background: #FF8B46;
		border-radius: 0 36upx 36upx 0;
		color: #FFFFFF;
		font-size: 28upx;
	}
	.staff-all-msg{
		width: 100%;
		/* background: #FFFFFF; */
		margin-top: 20upx;
	}
	.staff-status{
		width: 100%;
		padding: 20upx 30upx 8upx;
		background: #FFFFFF;
		box-sizing: border-box;
	}
	.staff-status-content{
		width: 100%;
		height: 64upx;
		background: #F2F2F2;
		border-radius: 32upx;
		display: flex;
	}
	.staff-status-content>view{
		width: 230upx;
		height: 100%;
		line-height: 64upx;
		border-radius: 32upx;
		color: #666666;
		font-size: 28upx;
		text-align: center;
	}
	.staff-status-content .is_active{
		background: linear-gradient(to right,#FE9543,#FF664F);
		color: #FFFFFF;
	}
	.staff-msg-content{
		width: 100%;
		background: #FFFFFF;
		padding: 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	.staff-name-img{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.staff-per-msg{
		display: flex;
	}
	.staff-name-img>view>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.staff-name{
		color: #333;
		font-size: 28upx;
		line-height: 80upx;
		margin-left: 20upx;
	}
	.staff-time{
		color: #666;
		font-size: 28upx;
		line-height: 80upx;
	}
	.staff-phone{
		width: 100%;
		display: flex;
		padding-left: 100upx;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.staff-phone-details{
		color: #666666;
		font-size: 28upx;
		line-height: 40upx;
	}
	.dial-phone{
		width: 120upx;
		height: 40upx;
		line-height: 40upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		border-radius: 4upx;
		color: #FFFFFF;
		text-align: center;
		font-size: 24upx;
	}
	.we-chat{
		margin-left: 72upx;
		color: #666666;
		font-size: 28upx;
		margin-top: 20upx;
	}
	.staff-post{
		display: flex;
		margin-top: 14upx;
		margin-left: 100upx;
		color: #666666;
		font-size: 28upx;
		line-height: 48upx;
	}
	.staff-post>view{
		border: 1upx solid #666666;
		width: 100upx;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		color: #666666;
		font-size: 24upx;
	}
	.staff-post>view:first-child{
		margin-right: 26upx;
	}
	.post-lift{
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding: 36upx 0 8upx;
		box-sizing: border-box;
		border-top: 1upx solid #DEDEDE;
		margin-top: 28upx;
	}
	.post-lift>view{
		width: 304upx;
		height: 92upx;
		line-height: 92upx;
		text-align: center;
		border: 1upx solid #FF8B46;
		border-radius: 8upx;
		color: #FF8B46;
		font-size: 32upx;
		margin-left: 10upx;
	}
</style>
